<template>
  <div class="home">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <img class="w-100" src="../assets/images/banner1.jpeg" alt=".." />
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/banner2.jpeg" alt=".." />
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/banner3.jpeg" alt=".." />
      </swiper-slide>
      <div class="swiper-pagination pagination-home text-right px-3 pb-1" slot="pagination"></div>
    </swiper>
    <!-- end of swiper -->
    <div class="nav-icons bg-white mt-3  text-center pt-3">
      <div class="d-flex flex-wrap">
        <div class="nav-item mb-3"
          v-for="n in 10"
          :key="n"
        >
          <i class="sprite sprite-news"></i>
          <div class="text-dark-1 py-2">爆料站</div>
        </div>
      </div>
      <div class="bg-light py-2 fs-sm">
        <i class="sprite sprite-arrow mr-1"></i>
        <span>收起</span>
      </div>
    </div>
    <!-- end of nav -->

    <m-list-card title="新闻资讯" icon="Menu" :categories="newsCategories">
      <!-- <template v-slot:categoryContent="content"> -->
      <template #categoryContent="content">
        <router-link
          class="py-2 fs-lg d-flex"
          v-for="(news, i) in content.content.newsList"
          :key="i"
          tag="div"
          :to="`/articles/${news._id}`"
        >
          <span class="text-info">[{{news.categoryName}}]</span>
          <span class="px-2"> | </span>
          <span class="flex-1 text-dark-1 text-ellipsis pr-2">{{news.title}}</span>
          <span class="fs-sm text-grey-1">{{news.createdAt | data}}</span>
        </router-link>
      </template>
    </m-list-card>

    <m-list-card title="英雄列表" icon="Hero" :categories="heroCategories">
      <!-- <template v-slot:categoryContent="content"> -->
      <template #categoryContent="content">
        <div class="d-flex flex-wrap" style="margin: 0 -0.5rem">
          <router-link
            tag="div"
            class="p-2 text-center"
            style="width: 20%"
            v-for="(hero, i) in content.content.heroList"
            :key="i"
            :to="`/heroes/${hero._id}`"
          >
            <img :src="hero.avatar" class="w-100">
            <div>{{hero.name}}</div>
          </router-link>
        </div>
      </template>
    </m-list-card>

    <m-card title="精彩视频" icon="Menu"></m-card>
    <m-card title="图文攻略" icon="Menu"></m-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'
  export default {
    name: 'carrousel',
    filters: {
      data(val) {
        return dayjs(val).format('MM/DD')
      }
    },
    data() {
      return {
        // 新闻资讯数据
        newsCategories: [],
        // 英雄列表
        heroCategories: [],
        swiperOptions: {
          pagination: {
            el: '.pagination-home'
          },
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    created() {
      this.fetchNewsCats()
      this.fetchHeroesCats()
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    },
    methods: {
      async fetchNewsCats() {
        const newsCats = await this.$http.get('news/list')
        this.newsCategories = newsCats.data
      },
      async fetchHeroesCats() {
        const heroesCats = await this.$http.get('heroes/list')
        this.heroCategories = heroesCats.data
      }
    }
  }
</script>

<style lang="scss">
@import '../assets/scss/varible';
.pagination-home {
  .swiper-pagination-bullet {
    border-radius: .1538rem;
    background: map-get($colors, 'white');
    opacity: 1;
    &.swiper-pagination-bullet-active {
      background-color: map-get($colors, 'info');
    }
  }
}

.nav-icons {
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  .nav-item {
    width: 25%;
    border-left: 1px solid $border-color;
    &:nth-child(4n+1) {
      border-left: none;
    }
  }
}

.home {
  overflow-x: hidden;
}

.card-body {
  overflow-x: hidden;
}
</style>
